import { connect } from 'umi';
import React from 'react';
import styles from './index.less';
import { formatterUnitOfData } from '@/utils/utils'
import CountUp from 'react-countup';

const HeaderTop = props => {
  const { topData = {}, fieldArr, chartType, needings  ,isShowDateRange } = props
  const { region, staticts } = needings
  const rentSign = '元/平方米/月'

  const { value, unit } = formatterUnitOfData(staticts, topData[fieldArr[0]])

  const countUpConfig = {
    start: 0,
    duration: 1.5,
    useEasing: true,
    useGrouping: true
  }
  return (
    <div className={styles.headerTop}>
      <div className={styles.conTop}>
        <div className={styles.conTopArea}>
          <h3>{`${topData.region_name || ''}${chartType}总${staticts}`}</h3>
          <p>
            <CountUp className={styles.number} {...countUpConfig} decimals={2} end={value} />
            <span style={{marginLeft: '2px'}}>
              {chartType === '租赁' && staticts === '均价' ? rentSign : unit}
            </span>
          </p>
        </div>
        <div className={styles.conTopProject}>
          {chartType === '库存' ?
            <>
              <h3>去化周期</h3>
              <p>
                <CountUp className={styles.number} {...countUpConfig} end={topData.destock_cycle || 0} />
                <span> 个月</span>
              </p>
            </> :
            <>
              <h3>{chartType}项目个数</h3>
              <p>
                <CountUp className={styles.number} {...countUpConfig} end={topData[fieldArr[3] + '_prename_number'] || topData['prename_number'] || 0} />
                <span> 个</span></p>
            </>
          }
        </div>
      </div>
      <div className={styles.smil} style={{display:!isShowDateRange ? 'block' : 'none'}}>
        <span className={topData[fieldArr[1]] < 0 ? styles.descend : styles.ascend}>
          同比：<span>{parseFloat((topData[fieldArr[1]] || 0) * 100).toFixed(1) || '0.0'}%</span>
          <span className={styles.arrow}>{topData[fieldArr[1]] < 0 ? '↓' : '↑'}</span>
        </span>
        <span className={topData[fieldArr[2]] < 0 ? styles.descend : styles.ascend}>
          环比：<span>{parseFloat((topData[fieldArr[2]] || 0) * 100).toFixed(1) || '0.0'}%</span>
          <span className={styles.arrow}>{topData[fieldArr[2]] < 0 ? '↓' : '↑'}</span>
        </span>
      </div>
    </div>
  );
}

export default connect(({ commerBuild, loading }) => ({
  commerBuild
}))(HeaderTop);
